<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style>
    .fixed-table-body{
        height: calc(73vh);
    }

    .fixed-table-footer{
        border-top: 0;
    }
</style>
<body class="gray-bg">
<div class="container-div">
    <div  id="flexSearchBox"  class="collapse out col-sm-12 search-box">
        <form id="user-form">
            <div class="select-list">
                <ul>

                    <li>
                        Product Name：<input class="reset" type="text" name="productName"/>
                    </li>
                    <li>
                        Domestic warehouse：<select name="chinaStorageID" th:with="type=${@dict.getType('erp_domestic_warehouse')}">
                        <option value="">all</option>
                        <option th:each="e : ${type}" th:text="${e['dictLabel']}" th:value="${e['dictValue']}"></option>
                    </select>
                    </li>
                    <li>
                        domestic express：<select name="chinaExpressCompanyID" th:with="type=${@dict.getType('erp_domestic_courier')}">
                        <option value="">all</option>
                        <option th:each="e : ${type}" th:text="${e['dictLabel']}" th:value="${e['dictValue']}"></option>
                    </select>
                    </li>
                    <li>
                        domestic express orderID：<input class="reset" type="text" name="chinaExpressNo"/>
                    </li>
                    <li class="time">
                        <label>create date:</label>
                        <input type="text" id="startTime" class="time-input reset"  placeholder="start date" name="beginCreateDate"/>
                        <span>to</span>
                        <input type="text" id="endTime" class="time-input reset"  placeholder="end date" name="endCreateDate"/>
                    </li>
                    <li>
                        <a class="btn btn-success btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;search</a>
                        <a class="btn btn-primary btn-rounded btn-sm reset-booton"><i class="glyphicon glyphicon-repeat"></i>&nbsp;reset</a>
                    </li>
                </ul>
            </div>
        </form>
    </div>

    <div class="btn-group hidden-xs" id="toolbar" role="group">
        <a class="btn btn-outline btn-success btn-rounded" onclick="$.operate.add()"
           shiro:hasPermission="module:purchases:add">
            <i class="fa fa-plus"></i> add
        </a>
        <a class="btn btn-outline btn-warning btn-rounded" onclick="showProductName()">
            <i class="glyphicon glyphicon-zoom-in"></i> showFullProductName
        </a>
        <a class="btn btn-outline btn-danger btn-rounded" onclick="$.operate.batRemove()"
           shiro:hasPermission="module:purchases:remove">
            <i class="fa fa-trash-o"></i> delete
        </a>
        <a class="btn btn-outline btn-info btn-rounded flex-botton" data-toggle="collapse" data-target="#flexSearchBox">
            <i class="glyphicon glyphicon-chevron-down">unfoldSearch
            </i>
        </a>
    </div>

    <div class="col-sm-12 select-info table-responsive">
            <table id="bootstrap-table"  class="table text-nowrap" data-height="770" data-mobile-responsive="true"></table>
    </div>
</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('module:purchases:edit')}]];
    var removeFlag = [[${@permission.hasPermi('module:purchases:remove')}]];
    var prefix = ctx + "module/purchases"
    var types = [[${@dict.getType('erp_domestic_warehouse')}]];
    var types1 = [[${@dict.getType('erp_domestic_courier')}]];

    $(function () {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            modalName: "国内采购",
            showFooter:true,
            columns: [{
                checkbox: true
            },{
                field: 'id',
                align: 'center',
                title: 'id',
                visible: false
            },
                {
                    title: 'serialNumber',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var pageSize = $('#bootstrap-table').bootstrapTable('getOptions').pageSize;     //通过table的#id 得到每页多少条
                        var pageNumber = $('#bootstrap-table').bootstrapTable('getOptions').pageNumber; //通过table的#id 得到当前第几页
                        return pageSize * (pageNumber - 1) + index + 1;    // 返回每条的序号： 每页条数 *（当前页 - 1 ）+ 序号
                    },
                    footerFormatter: function (value) {
                        return 'total';
                    }
                },
                {
                    title: 'operation',
                    clickToSelect : false,
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>edit</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>delete</a>');
                        return actions.join('');
                    }
                },
                {
                    field: 'mainSKU',
                    align: 'center',
                    sortable: true,
                    title: '<span class="globalSearch_column">SKU</span>'
                },
                {
                    field: 'productName',
                    align: 'center',
                    sortable: true,
                    clickToSelect : false,
                    title: '<span class="globalSearch_column">productName</span>',
                    formatter: function (value, row, index) {
                        if (fal){
                            return '<div class="popover_productname" data-toggle="popover" data-placement="top" data-content="'+value+'">'+value+'</div>';
                        }else {
                            return '<div class="popover_productname" data-toggle="popover" data-placement="top" data-content="'+value+'">'+sub_hidden(value)+'</div>';

                        }
                    }
                },
                {
                    field: 'purchaseQuantity',
                    align: 'center',
                    sortable: true,
                    title: 'purchaseQuantity',
                    footerFormatter: function (value) {
                        return calculateLineTotalAsServer(value,$.table.sumRows.purchaseQuantity);
                    }
                },
                {
                    field: 'chinaStorageID',
                    align: 'center',
                    sortable: true,
                    title: 'sendToTheWarehouse',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(types, value);
                    }
                },
                {
                    field: 'chinaExpressCompanyID',
                    align: 'center',
                    sortable: true,
                    title: 'domesticExpress',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(types1, value);
                    }
                },
                {
                    field: 'chinaExpressNo',
                    align: 'center',
                    sortable: true,
                    clickToSelect : false,
                    title: '<span class="globalSearch_column">domesticExpressNumber</span>',
                    formatter: function (value, row, index) {
                        var href ="<a target=\"view_window\" href=\"http://m.kuaidi100.com/app/query/?nu="+value+"\">";
                        return href +value+'</a>';
                    }
                },
                {
                    field: 'createBy',
                    align: 'center',
                    sortable: true,
                    title: 'createBy'
                },
                {
                    field: 'createDate',
                    align: 'center',
                    sortable: true,
                    title: 'purchaseTime',
                    formatter: function (value, row, index) {
                        if(row.updateDate > value){
                            return row.updateDate;
                        }
                        else {
                            return value;
                        }
                    }
                },
                {
                    field: 'updateBy',
                    align: 'center',
                    sortable: true,
                    title: 'updateBy'
                },
                {
                    field: 'updateDate',
                    align: 'center',
                    sortable: true,
                    title: 'updateDate'
                },
                {
                    field: 'companyName',
                    align: 'center',
                    sortable: true,
                    title: 'company'
                }/*,
                {
                    field: 'bz',
                    align: 'center',
                    sortable: true,
                    title: '备注'
                }*/],
            onLoadSuccess: function (item, $element) {

                $('.fixed-table-footer').addClass("totalRowBackground-color");//合计行添加颜色
                //初始化提示框方法
                initialize_popover();
            },
        };
        $.table.init(options);
    });
    /*展示所有名称*/
    var fal = false;
    var fal_num = 0;
    function showProductName(){
        if (fal_num % 2 == 0){
            fal = true;
        }else {
            fal = false;
        }
        fal_num++;
        $("#bootstrap-table").bootstrapTable('refresh');
    }
</script>
</body>
</html>